<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>栏目管理</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/cms.css" />

<script type="text/javascript" src="<%=request.getContextPath()%>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/win.js"></script>
<script type="text/javascript">
	function addColumn(){
		var node = $("#columnTree").tree("getSelected");
		openUrl("新增栏目", 400, 350, "<%=request.getContextPath()%>/column/initEdit.do?pid="+node.id);
	}
	
	function reloadDg(){
		$("#dg").datagrid("reload");
		$("#columnTree").tree("reload");
		closeWin();
	}
	
	function deleteColumn(){
		checkSelectSomeDoAction("#dg", "删除", "栏目", "<%=request.getContextPath()%>/column/deleteColumns.do", true, reloadDg);
	}
	
	function editColumn(){
		selectOneOpenUrl("#dg","<%=request.getContextPath()%>/column/initEdit.do", 400, 350, "修改", "栏目");
	}
	
	/**
   	 *初始化栏目树
   	 *限制为三层，第一层为前台和后台节点(固定)，有两层可动态添加修改的子节点
	 *
	 */
	function initColumnTree(){
		$("#columnTree").tree({
			"url":"<%=request.getContextPath()%>/column/columnTree.do?type=3",
			onClick:function(node){
				var pnode = $(this).tree("getParent", node.target);
				if(pnode != null){ //有父节点
					if(pnode.id < 0){//第一层节点
						$("#toolbarContainer").show();
					} else { //第二层节点，不能添加子节点
						$("#toolbarContainer").hide();
					}
				} else { // 顶层节点
					$("#toolbarContainer").show();
				}
				querySub(node.id);
			},
			onLoadSuccess: function(node, data){
				var n = $(this).tree("find", -1);
				$(this).tree("select", n.target);
			}
		});
	}
	
	$(function(){
		initColumnTree();
		initDg(-1);
	});
	
	function initDg(pid){
		$("#dg").datagrid({
			url : "<%=request.getContextPath()%>/column/list.do",
			queryParams:{pid:pid}
		});
	}
	
	function querySub(pid){
		$("#dg").datagrid({
			queryParams:{pid:pid}
		});
	}
	
</script>
</head>
<body class="easyui-layout">

	<div data-options="region:'west',border:false" style="width: 200px; padding: 10px;background-color: #EEE;border-right: 1px solid #ddd">
		<ul id="columnTree"></ul>
	</div>
	<div data-options="region:'center',border:false" id="center">
		<div class="dg-content">
			<table id="dg" title="栏目列表" data-options="rownumbers:true,fitColumns:true,iconCls:'icon-users',toolbar:'#toolbar'">
				<thead>
					<tr>
						<th data-options="field:'ck',checkbox:true"></th>
						<th data-options="field:'id',hidden:true"></th>
						<!-- <th data-options="field:'typeText',width:80,align:'center'">类型</th> -->
						<th data-options="field:'name',width:80,align:'center'">名称</th>
						<th data-options="field:'url',width:150,align:'center'">链接地址</th>
						<th data-options="field:'remark',width:100,align:'center'">备注</th>
					</tr>
				</thead>
			</table>
			<div class='dg-toolbar' id="toolbar" style="padding: 5px 10px;">
				<div id="toolbarContainer">
				<a href="javascript:addColumn()" class="easyui-linkbutton"
					iconCls="icon-add" plain="true">新增</a> 
				<a href="javascript:editColumn()" class="easyui-linkbutton"
					iconCls="icon-edit" plain="true">修改</a> 
				<a href="javascript:deleteColumn()" class="easyui-linkbutton"
					iconCls="icon-remove" plain="true">删除</a>
				</div>
			</div>
		</div>
	</div>

</body>
</html>